<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机器管理</title>
    <link rel="stylesheet" href="/static/lib/layui-v2.5.6/layui-v2.5.6/layui/css/layui.css">
    <style>
        .layui-table-cell{
            height:50px;
            line-height: 50px;
        }
        .layui-col-xs1{
            height: 66px;
            line-height: 66px;
            margin: 5px 5px 0 0;
            text-align: center;
            font-size: 20px;
            cursor: pointer;
        }
        .info{
            font-size: 14px;
            color: rgb(110, 108, 108);
            line-height: 36px;
        }

        .btn-box {
            position: relative;
        }

        .file-ipt {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0; 
        }

        .btn {
            width: 100px;
            height: 30px;
            background-color: skyblue;
            color: white;
            margin-right: 80px;
            border: none;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <table id="demo" lay-filter="test"></table>


    
    <div id="machineUpdate" style="display: none;margin-top: 30px;">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">收货点类型</label>
                <div class="layui-input-inline">
                    <select name="machineType" lay-verify="" id="machineType" class="goodstype">
                        <option value="0">售货机</option>
                        <option value="1">门店</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">机器容量</label>
                <div class="layui-input-inline">
                    <input id="machineCapacity" type="text" name="machineCapacity" required lay-verify="required" placeholder="请输入机器容量" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">机器位置</label>
                <div class="layui-input-inline">
                    <input id="machinePlace_i" type="text" name="machinePlace_i" required lay-verify="required" placeholder="请输入位置名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">坐标纬度</label>
                <div class="layui-input-inline">
                    <input id="machinelatitude_i" type="text" name="machinelatitude_i" required lay-verify="required" placeholder="请输入纬度信息" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">坐标经度</label>
                <div class="layui-input-inline">
                    <input id="machinelongitude_i" type="text" name="machinelongitude_i" required lay-verify="required" placeholder="请输入经度信息" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">详细地址</label>
                <div class="layui-input-inline">
                    <textarea name="machineAddress_i" id="machineAddress_i" cols="40" rows="5" placeholder="请输入机器详细地址"></textarea>
                </div>
            </div>
            <div class="layui-form-item btn-box" style="margin: 30px 0 0 30px;">
                <button class="btn">上传图片</button>
                <input type="file" id="imgPath" class="file-ipt">
            </div>
        </form>
    </div>


    <div id="goodsInformation" style="display: none;">
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block commodityName_info info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">机器ID</label>
            <div class="layui-input-block id_info info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">格子柜号</label>
            <div class="layui-input-block containerId_info info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品分类</label>
            <div class="layui-input-block categoryName_info info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品单价</label>
            <div class="layui-input-block price_info info"></div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">商品规格</label>
              <div class="layui-input-inline specifications_info info"></div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">销售数量</label>
              <div class="layui-input-inline count_info info"></div>
            </div>
        </div>
        <label class="layui-form-label">商品图片</label>
        <div class="picture_info"></div>
    </div>
<!-- 订单详细页面 -->
    <div id="orderDetails" style="display: none;">
        <div class="layui-form-item">
            <label class="layui-form-label">订单号</label>
            <div class="layui-input-block id_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block userid_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">买家编号</label>
            <div class="layui-input-block buyerid_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单时间</label>
            <div class="layui-input-block createdate_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单状态</label>
            <div class="layui-input-block orderstatus_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">付款方式</label>
            <div class="layui-input-block paymethod_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">付款订单</label>
              <div class="layui-input-inline payorderid_info1 info"></div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">付款时间</label>
              <div class="layui-input-inline paydate_info1 info"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">机器ID</label>
              <div class="layui-input-inline machineid_info1 info"></div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">格子柜号</label>
              <div class="layui-input-inline containernumber_info1 info"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单总价</label>
            <div class="layui-input-block amount_info1 info"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block comment_info1 info"></div>
        </div>

        <table class="layui-table" lay-skin="line">
            <thead>
                <tr>
                  <th>商品名称</th>
                  <th>商品规格</th>
                  <th>商品单价</th>
                  <th>商品数量</th>
                </tr> 
            </thead>
            <tbody id="commodities_info1"></tbody>
        </table>

    </div>



    <div id="machineContainers" class="layui-container" style="display: none;">
        <div class="layui-row" id="machineContainers_info">
            
        </div>
    </div>      


    <script type="text/html" id="barDemo">
        <i class="layui-icon layui-icon-list" lay-event="machineUpdate" title="机器信息修改"></i>
        <i class="layui-icon layui-icon-tabs" lay-event="machineContainers" title="机器格子柜查询"></i>
    </script>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="machineAdd">添加机器</button>
        </div>
    </script>



    <script src="/static/lib/layui-v2.5.6/layui-v2.5.6/layui/layui.js"></script>
    <script>
        layui.use('table', function(){
            var $ = layui.jquery;
            var table = layui.table;
            // var util = layui.util;


            table.render({
                elem: '#demo',
                height: 'full-60',
                url: '/admin/machine/queryMachineList', //数据接口
                page: {layout: ['prev', 'page', 'next', 'skip', 'count']}, //开启分页
                toolbar: '#toolbarDemo',
                defaultToolbar: [],
                id: 'adTest',
                cols: [[ //表头
                {field: 'id', title: '  机器ID', width:'5%', sort: true, fixed: 'left'},
                {field: 'place', title: '机器位置', width:'20%',},
                {field: 'latitude', title: '坐标纬度', width:'10%', sort: true},
                {field: 'longitude', title: '坐标经度', width:'10%'} ,
                {field: 'machineStatus', title: '机器状态', templet:'<div>{{machineStatus(d.machineStatus)}}</div>', width: '9%'},
                {field: 'stock', title: '库存状态', width: '9%', templet:'<div>{{stockStatus(d.stock)}}</div>', sort: true},
                {field: 'type', title: '地点类型', width:'8%', templet:'<div>{{typefun(d.type)}}</div>'},
                {field: 'capacity', title: '容量', width:'8%'},
                {field: 'place_address', title: '详细地址'},
                {fixed: 'right', width:'8%', align:'center', toolbar: '#barDemo'}
                ]],


                parseData: function(res){ //res 即为原始返回的数据
                    return {
                    "code": res.success, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                    };
                },
                request: {
                    pageName: 'pageNum', //页码的参数名称，默认：page
                    limitName: 'pageSize' //每页数据量的参数名，默认：limit
                },
                response: {
                    // statusName: 'success', //规定数据状态的字段名称，默认：code
                    statusCode: true //规定成功的状态码，默认：0
                }
            });
        
            table.on('toolbar(test)', function(obj){
                switch(obj.event){
                    case 'machineAdd':   
                        $("#imgPath").val('')
                        $("#machinePlace_i").val('')
                        $("#machinelongitude_i").val('')
                        $("#machinelatitude_i").val('')
                        $("#machineCapacity").val('')
                        $("#machineAddress_i").val('')
                        layer.open({
                            type: 1,
                            skin: 'layui-layer-rim', //加上边框
                            area: ['520px', '550px'], //宽高
                            title: '机器信息添加',
                            btn: ['添加','取消'],
                            content: $('#machineUpdate'),
                            yes: function(index){
                                var machineType = $("#machineType").val()
                                var machineCapacity = $("#machineCapacity").val()
                                if (machineType == 0) {
                                    var file = $("#imgPath")[0].files[0];//获取文件
                                    var formData = new FormData();
                                    if (file == undefined || $("#machinePlace_i").val() =='' || $("#machinelongitude_i").val() =='' || $("#machinelatitude_i").val() == '' || machineCapacity == '') {
                                        layer.msg('填写完整的信息和图片')
                                    }else {
                                        formData.append("type", machineType);
                                        formData.append("capacity", machineCapacity);
                                        formData.append("picture", file);
                                        formData.append("place", $("#machinePlace_i").val());
                                        formData.append("longitude", $("#machinelongitude_i").val());
                                        formData.append("latitude", $("#machinelatitude_i").val());
                                        formData.append("place_address", $("#machineAddress_i").val());
                                        $.ajax({
                                            type: "post",
                    //TODO:
                                            url: "/admin/machine/addMachine",
                                            data: formData,
                                            dataType: "json",
                                            processData: false,
                                            contentType: false,
                                            success: function(mag){
                                                layer.msg(mag.message)
                                                table.reload('adTest')
                                            }
                                        })
                                        layer.close(index);
                                    }
                                }else if (machineType == 1) {
                                    var file = $("#imgPath")[0].files[0];//获取文件
                                    var formData = new FormData();
                                    if (file == undefined || $("#machinePlace_i").val() =='' || $("#machinelongitude_i").val() =='' || $("#machinelatitude_i").val() == '') {
                                        layer.msg('填写完整的信息和图片')
                                    }else {
                                        formData.append("type", machineType);
                                        formData.append("picture", file);
                                        formData.append("place", $("#machinePlace_i").val());
                                        formData.append("longitude", $("#machinelongitude_i").val());
                                        formData.append("latitude", $("#machinelatitude_i").val());
                                        formData.append("place_address", $("#machineAddress_i").val());
                                        $.ajax({
                                            type: "post",
                    //TODO:
                                            url: "/admin/machine/addMachine",
                                            data: formData,
                                            dataType: "json",
                                            processData: false,
                                            contentType: false,
                                            success: function(mag){
                                                layer.msg(mag.message)
                                                table.reload('adTest')
                                            }
                                        })
                                        layer.close(index);
                                    }
                                }
                            }
                        });
                    break;
                };
            });

            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if(layEvent === 'machineUpdate'){
                    $("#imgPath").val('')
                    $("#machinePlace_i").val('')
                    $("#machinelongitude_i").val('')
                    $("#machinelatitude_i").val('')
                    $("#machineAddress_i").val('')
                    $("#machineCapacity").val('')
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['520px', '550px'], //宽高
                        title: '机器信息修改',
                        btn: ['更新','取消'],
                        content: $('#machineUpdate'),
                        yes: function(index){
                            var file = $("#imgPath")[0].files[0];//获取文件
                            var formData = new FormData();
                            if ($("#machinePlace_i").val() != '') {
                                formData.append("place", $("#machinePlace_i").val());  
                            }
                            if ($("#machinelongitude_i").val() != '') {
                                formData.append("longitude", $("#machinelongitude_i").val());  
                            }
                            if ($("#machinelatitude_i").val() != '') {
                                formData.append("latitude", $("#machinelatitude_i").val());  
                            }
                            if ($("#machineAddress_i").val() != '') {
                                formData.append("place_address", $("#machineAddress_i").val());
                            }
                            if ($("#machineType").val() != '') {
                                formData.append("type", $("#machineType").val());
                            }
                            if ($("#machineCapacity").val() != '') {
                                formData.append("capacity", $("#machineCapacity").val());
                            }
                            formData.append("picture", file);
                            
                            $.ajax({
                                type: "post",
                                url: "/admin/machine/update?machineId=" +data.id,
                                data: formData,
                                dataType: "json",
                                processData: false,
                                contentType: false,
                                success: function(mag){
                                    layer.msg(mag.message)
                                    table.reload('adTest')
                                }
                            })
                            layer.close(index);
                            
                        }
                    });
                } else if(layEvent === 'machineContainers'){ //删除
                    $.ajax({
                        type: "get",
                        url: "/admin/machine/containers/" +data.id,
                        data: '',
                        dataType: "json",
                        async: false,
                        success: function(mag){
                            var mag =mag.data
                            var tag = ''
                            for (var i = 0; i < mag.length; i++) {
                                var str = mag[i].commodityIdInMachine
                                if (isNaN(str)) {
                                    var tag1 = '<div class="layui-col-xs1 Containers_1" style="background-color: #009688;" CIM="'+ mag[i].commodityIdInMachine +'">'+ mag[i].container_number +'</div>';
                                }else{
                                    var tag1 = '<div class="layui-col-xs1 Containers_1" style="background-color: #1E9FFF;" CIM="'+ mag[i].commodityIdInMachine +'">'+ mag[i].container_number +'</div>';
                                }
                                tag += tag1
                            }
                            $("#machineContainers_info").html(tag)
                        }
                    })
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['72%', '90%'], //宽高
                        title: '机器格子柜信息',
                        btn: ['关闭'],
                        content: $('#machineContainers'),
                    }); 
                }
            });



            $(document).off('click','.Containers_1').on("click",".Containers_1",function(){
                var id = $(this).attr('CIM')
                if (isNaN(id)) {
                    $.ajax({
                        type: "post",
                        url: "/admin/bookOrderAdmin/getOrderDetail",
                        data: {order_id: id},
                        dataType: "json",
                        async: false,
                        success: function(mag){
                            $(".id_info1").html('<span style="color: #f173e1;">'+mag.data.id+'</span>')
                            $(".userid_info1").html(mag.data.user.name)
                            $(".buyerid_info1").html(mag.data.buyer_id)
                            $(".createdate_info1").html(layui.util.toDateString(Number(mag.data.create_date), "yyyy.MM.dd HH:mm:ss"))
                            $(".orderstatus_info1").html(orderstatusfun(mag.data.order_status))
                            $(".machineid_info1").html(mag.data.machine_id)
                            $(".containernumber_info1").html(mag.data.container_number)
                            $(".amount_info1").html('<span style="color: #f173e1;">'+mag.data.amount+'</span>')
                            $(".comment_info1").html(mag.data.comment)
                            $(".paymethod_info1").html(paymethodfun(mag.data.pay_method))
                            $(".payorderid_info1").html(mag.data.pay_order_id)
                            $(".paydate_info1").html(layui.util.toDateString(Number(mag.data.pay_date), "yyyy.MM.dd HH:mm:ss"))
                            var commodities = mag.data.commodities
                            if (commodities.length != 0) {
                                var flag = ''
                                for (var i = 0; i < commodities.length; i++) {
                                    var flag1 = '<tr><td>'+ commodities[i].commodityName +'</td><td>'+ commodities[i].specifications +'</td><td>'+ commodities[i].price +'</td><td>'+ commodities[i].count +'</td></tr>' 
                                }
                                flag += flag1
                                $("#commodities_info1").html(flag)
                            }
                              
                        }
                    })
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['66%', '90%'], //宽高
                        title: '机器格子柜信息',
                        btn: ['关闭'],
                        content: $('#orderDetails'),
                    });
                }else {
                    $.ajax({
                        type: "get",
                        url: "/admin/commodity/getCommodityInMachine/" +id,
                        data: '',
                        dataType: "json",
                        async: false,
                        success: function(mag){
                            $(".id_info").html('<span style="color: #f173e1;">'+mag.data.id+'</span>')
                            $(".containerId_info").html(mag.data.containerId)
                            $(".commodityName_info").html(mag.data.commodityName)
                            $(".categoryName_info").html(mag.data.categoryName)
                            $(".price_info").html(mag.data.price)
                            $(".specifications_info").html(mag.data.specifications)
                            $(".count_info").html(mag.data.count)
                            $(".picture_info").html('<div><img style="height: 160px;width:160px" src="https://vm.fowotek.com'+ mag.data.picture +' "</div>')
                        }
                    })
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['66%', '90%'], //宽高
                        title: '机器格子柜信息',
                        btn: ['关闭'],
                        content: $('#goodsInformation'),
                    });
                }
            })
        
        
        });
        function orderstatusfun(num) {
            if (num == 0) {
                var orderstatus = '未付款'
            }else if (num == 1) {
                var orderstatus = '<span style="color: #f173e1;">未发货</span>'
            }else if (num == 2) {
                var orderstatus = '未取货'
            }else if (num == 3) {
                var orderstatus = '订单完成'
            }
            return orderstatus
        }
        function paymethodfun(num) {
            if (num == 0) {
                var paymethod = '支付宝'
            }else if (num == 1){
                var paymethod = '微信'
            }else if (num == 2){
                var paymethod = '账户余额'
            }else {
                var paymethod = '其他支付方式'
            }
            return paymethod
        }
        function machineStatus(num) {
            if (num == 0) {
                var machineStatus = '正常'
            }else {
                var machineStatus = '未上架'
            }
            return machineStatus
        }
        function stockStatus(num) {
            if (num == 0) {
                var stockStatus = '正常'
            }else {
                var stockStatus = '未上架'
            }
            return stockStatus
        }
        function typefun(num) {
            if (num == 0) {
                var type = '售货机'
            } else if (num == 1) {
                var type = '门店'
            }else {
                var type = '未绑定'
            }
            return type;
        }
    </script>
</body>
</html>